<template>
    <el-form-item :label="widget.name" :prop="widget.model" :style="{display: widget.type == 'tag' ? 'inline-block' : 'block'}">
        <template v-if="widget.type == 'input'" >
            <el-input
                v-if="widget.options.dataType == 'number' || widget.options.dataType == 'integer' || widget.options.dataType == 'float'"
                :type="widget.options.dataType"
                v-model.number="dataModel"
                :placeholder="widget.options.placeholder"
                :style="{width: widget.options.width}"
            />
            <el-input
                v-else
                :type="widget.options.dataType"
                v-model="dataModel"
                :placeholder="widget.options.placeholder"
                :style="{width: widget.options.width}"
            />
        </template>

        <template v-if="widget.type == 'textarea'">
            <el-input
                type="textarea"
                :rows="5"
                v-model="dataModel"
                :disabled="widget.options.disabled"
                :placeholder="widget.options.placeholder"
                :style="{width: widget.options.width}"
            />
        </template>

        <template v-if="widget.type == 'number'">
            <el-input-number
                v-model="dataModel"
                :style="{width: widget.options.width}"
                :step="widget.options.step"
                controls-position="right"
            />
        </template>

        <template v-if="widget.type == 'radio'">
            <el-radio-group
                v-model="dataModel"
                :style="{width: widget.options.width}"
            >
                <el-radio
                    :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
                    :label="item.value"
                    v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
                    :key="index"
                >
                    <template v-if="widget.options.remote">{{ item.label }}</template>
                    <template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
                </el-radio>
            </el-radio-group>
        </template>

        <template v-if="widget.type == 'checkbox'">
            <el-checkbox-group
                v-model="dataModel"
                :style="{width: widget.options.width}"
            >
                <el-checkbox

                    :style="{display: widget.options.inline ? 'inline-block' : 'block'}"
                    :label="item.value"
                    v-for="(item, index) in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)"
                    :key="index"
                >
                    <template v-if="widget.options.remote">{{ item.label }}</template>
                    <template v-else>{{ widget.options.showLabel ? item.label : item.value }}</template>
                </el-checkbox>
            </el-checkbox-group>
        </template>

        <template v-if="widget.type == 'time'">
            <el-time-picker
                v-model="dataModel"
                :is-range="widget.options.isRange"
                :placeholder="widget.options.placeholder"
                :start-placeholder="widget.options.startPlaceholder"
                :end-placeholder="widget.options.endPlaceholder"
                :readonly="widget.options.readonly"
                :disabled="widget.options.disabled"
                :editable="widget.options.editable"
                :clearable="widget.options.clearable"
                :arrow-control="widget.options.arrowControl"
                :value-format="widget.options.format"
                :style="{width: widget.options.width}"
            />
        </template>

        <template v-if="widget.type=='date'">
            <el-date-picker
                v-model="dataModel"
                :type="widget.options.type"
                :placeholder="widget.options.placeholder"
                :start-placeholder="widget.options.startPlaceholder"
                :end-placeholder="widget.options.endPlaceholder"
                :readonly="widget.options.readonly"
                :disabled="widget.options.disabled"
                :editable="widget.options.editable"
                :clearable="widget.options.clearable"
                :value-format="widget.options.timestamp ? 'timestamp' : widget.options.format"
                :format="widget.options.format"
                :style="{width: widget.options.width}"
            />
        </template>

        <template v-if="widget.type =='rate'">
            <el-rate
                v-model="dataModel"
                :max="widget.options.max"
                :disabled="widget.options.disabled"
                :allow-half="widget.options.allowHalf"
            />
        </template>

        <template v-if="widget.type == 'color'">
            <el-color-picker
                v-model="dataModel"
                :disabled="widget.options.disabled"
                :show-alpha="widget.options.showAlpha"
            />
        </template>

        <template v-if="widget.type == 'select'">
            <el-select
                v-model="dataModel"
                :disabled="widget.options.disabled"
                :multiple="widget.options.multiple"
                :clearable="widget.options.clearable"
                :placeholder="widget.options.placeholder"
                :style="{width: widget.options.width}"
                :filterable="widget.options.filterable"
            >
                <el-option v-for="item in (widget.options.remote ? widget.options.remoteOptions : widget.options.options)" :key="item.value" :value="item.value" :label="widget.options.showLabel || widget.options.remote?item.label:item.value"/>
            </el-select>
        </template>

        <template v-if="widget.type=='switch'">
            <el-switch
                v-model="dataModel"
                :disabled="widget.options.disabled"
            />
        </template>

        <template v-if="widget.type=='slider'">
            <el-slider
                v-model="dataModel"
                :min="widget.options.min"
                :max="widget.options.max"
                :disabled="widget.options.disabled"
                :step="widget.options.step"
                :show-input="widget.options.showInput"
                :range="widget.options.range"
                :style="{width: widget.options.width}"
            />
        </template>

        <template v-if="widget.type=='img'">
            <div
                class="img-content"
                @click="goLink(widget.options.linkType, widget.options.linkUrl, widget.options.query)"
                :style="{
                    'text-align': widget.options.textAlign,
                    'background-color': widget.options.backgroundColor
            }">
                <img
                    :src="widget.options.defaultValue"
                    :style="{
                        'border-radius': widget.options.borderRadius,
                        'width': widget.options.width,
                        'height': widget.options.height
                    }"
                >
            </div>
        </template>
        <template v-if="widget.type=='title'">
            <h4
                class="title-content"
                @click="goLink(widget.options.linkType, widget.options.linkUrl, widget.options.query)"
                :style="{
                    'display': widget.options.inline ? 'inline-block': 'block',
                    'text-align': widget.options.textAlign,
                    'color': widget.options.color,
                    'font-size': widget.options.fontSize,
                    'font-weight': widget.options.Weight,
                    'margin-left': widget.options.marginLeft,
                    'margin-right': widget.options.marginRight,
                    'height': widget.options.height,
                    'line-height': widget.options.lineHeight
                }"
                v-html="dataModel"/>
        </template>

        <template v-if="widget.type=='tag'">
            <el-tag
                :type="widget.options.type"
                :hit="widget.options.hit"
                :color="widget.options.tagColor"
                :size="widget.options.size"
                @click="goLink(widget.options.linkType, widget.options.linkUrl, widget.options.query)"
                :style="{
                    'margin-left': widget.options.marginLeft,
                    'margin-right': widget.options.marginRight
                }"
                v-html="dataModel"/>
        </template>

        <template v-if="widget.type=='button'">
            <el-button
                :type="widget.options.type"
                :size="widget.options.size"
                @click="goLink(widget.options.linkType, widget.options.linkUrl, widget.options.query)"
                :style="{
                    'margin-left': widget.options.marginLeft,
                    'margin-right': widget.options.marginRight
                }"
                v-html="dataModel"/>
        </template>

        <template v-if="widget.type=='cell'">
            <div
                class="cell-content row"
                :class="{'hover-zoom': widget.options.showHover}"
                @click="goLink(widget.options.linkType, widget.options.linkUrl, widget.options.query)"
                @mouseover="widget.options.showHover = true"
                @mouseout="widget.options.showHover = false"
                :style="{
                    'color': widget.options.color,
                    'margin-left': widget.options.marginLeft,
                    'margin-right': widget.options.marginRight,
                    'background-color':widget.options.backgroundColor,
                    'background-image':widget.options.backgroundImage
            }">
                <div class="col col-img">
                    <div class="left-img-content">
                        <img
                            v-if="widget.options.imgType === 'image'"
                            :src="widget.options.imgdefaultValue"
                            :style="{
                                'border-radius': widget.options.borderRadius,
                                'width': widget.options.imgWidth,
                                'height': widget.options.imgHeight
                            }"
                        >
                        <i
                            v-else
                            :class="['iconfont', widget.options.iconName]"
                            :style="{
                                'color': widget.options.color,
                                'font-size': widget.options.fontSize
                        }"/>
                    </div>
                </div>
                <div class="col col-text">
                    <div>
                        <h2 class="text-title" v-html="widget.options.titleDefaultValue"/>
                        <p class="text-desc" v-html="widget.options.descDefaultValue"/>
                    </div>
                </div>
            </div>
        </template>

        <template v-if="widget.type=='icon'">
            <i
                :class="['iconfont', widget.options.iconName]"
                @click="goLink(widget.options.linkType, widget.options.linkUrl, widget.options.query)"
                :style="{
                    'color': widget.options.color,
                    'font-size': widget.options.fontSize
            }"/>
        </template>

        <template v-if="widget.type=='ninecard'">
            <div
                class="img-content"
                :style="{
                    'text-align': widget.options.textAlign,
                    'background-color': widget.options.backgroundColor}"
                :data-link="widget.options.linkDefaultValue">
                <img
                    :src="widget.options.imgDefaultValue"
                    :style="{
                        'border-radius': widget.options.borderRadius,
                        'width': widget.options.width,
                        'height': widget.options.height
                    }"
                >
                <h4
                    class="title-content"
                    :style="{
                        'color': widget.options.color,
                        'font-size': widget.options.fontSize,
                        'font-weight': widget.options.Weight
                    }"
                    v-html="widget.options.titleDefaultValue"/>
            </div>
        </template>

        <template v-if="widget.type=='imgupload'">
            <fm-upload
                v-model="dataModel"
                :disabled="widget.options.disabled"
                :style="{'width': widget.options.width}"
                :width="widget.options.size.width"
                :height="widget.options.size.height"
                :token="widget.options.token"
                :domain="widget.options.domain"
            />
        </template>

        <template v-if="widget.type == 'editor'">
            <fm-editor
                v-model="dataModel"
                :width="widget.options.width"
                :height="widget.options.height"
            />
        </template>

        <template v-if="widget.type == 'cascader'">
            <el-cascader
                v-model="dataModel"
                :disabled="widget.options.disabled"
                :clearable="widget.options.clearable"
                :placeholder="widget.options.placeholder"
                :style="{width: widget.options.width}"
                :options="widget.options.remoteOptions"
            />
        </template>
        <template v-if="widget.type == 'editor'">
            <fm-editor
                v-model="widget.options.defaultValue"
                :width="widget.options.width"
                :height="widget.options.height"
            />
        </template>

        <template v-if="widget.type == 'detailTitle'">
            <div
                v-html="dataModel"
                @click="goLink(widget.options.linkType, widget.options.linkUrl, widget.options.query)"
                :style="{'margin-left': widget.options.marginLeft,'margin-right': widget.options.marginRight,'height': widget.options.height,'line-height': widget.options.lineHeight,'text-align': widget.options.textAlign,'display': widget.options.inline ? 'inline-block': 'block'}"
            >
                <span :style="{'fontSize':widget.options.fontSizeTitle,'color':widget.options.colorTitle,'font-weight':700}">{{ widget.options.title }}</span>
                <span :style="{'fontSize':widget.options.fontSizeContent,'color':widget.options.colorContent}">{{ widget.options.content }}</span>
            </div>
        </template>
        <template v-if="widge.type=='card'">
            <el-card class="box-card" :v-model="dataModel" :style="{'width':widge.options.width}">
                <div slot="header" class="clearfix" style="">
                    <span>{{ widge.options.titleDefaultValue }}</span>
                    <el-button style="float: right; padding: 3px 0" type="text">{{ widge.options.optionButtonName }}</el-button>
                </div>
                <div v-for="item in widge.options.defaultValue" :key="item" class="text item" style="font-size: 14px;margin-bottom: 18px;">
                    {{ '列表内容 ' + item }}
                </div>
            </el-card>
        </template>
        <template v-if="widge.type=='card2'">
            <div :class="widge.options.chioseColor" :v-model="dataModel" :style="{'width':widge.options.width}">
                <!-- <div class="title-card" :class="element.options.chioseColor"></div>     -->
                <div class="row" id="row">
                    <div class="col-xs-12 text-right">
                        <div class="card-main-div" >
                            <div class="card-img-div" style=" background: url('') no-repeat;background-color:rgba(0,0,0,0.1)"/>
                            <div class="card-middle-div" style="">{{ widge.options.titleDefaultValue }}</div>
                            <div class="card-text-div">
                                {{ widge.options.cardValue }}
                            </div>
                            <div class="card-text-detail">
                                {{ widge.options.detailValue }}
                            </div>
                        </div>
                        <div class="card-more-div">
                            <p>查看更多</p>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-if="widget.type=='card3'">
            <div class="card3-div" :v-model="dataModel" :style="{'background-color':widget.options.backgroundColor,'width':widget.options.width,'height':widget.options.height}">
                <div class="card3-title" :style="{'text-align':'center','font-size':'25px'}">{{ widget.options.titleDefaultValue }}</div>
                <div class="card3-title" :style="{'text-align':widget.options.textAlign,'font-size': widget.options.fontSize}">{{ widget.options.cardValue }}</div>
            </div>
        </template>
        <template v-if="widget.type=='card4'" >
            <div :class="widget.options.chioseColor" :v-model="dataModel" :style="{'width':widget.options.width,'border-radius':'8px','background-repeat': 'no-repeat','background-size':'100% 100%','overflow':'hidden'}">
                <!-- <div class="title-card" :class="element.options.chioseColor"></div>     -->
                <div class="row" id="row">
                    <div class="col-xs-12 text-right">
                        <div class="card-main-div" >
                            <!--<div class="card-img-div" style=" background: url('') no-repeat;background-color:rgba(0,0,0,0.1)"/>-->
                            <div class="card-img-div" style=" background: url('') no-repeat;background-color:transparent"/>
                            <div class="card4-middle-div" style="">{{ widget.options.titleDefaultValue }}</div>
                            <div class="card4-text-div">
                                {{ widget.options.cardValue }}
                            </div>
                            <div class="card-text-detail">
                                {{ widget.options.detailValue }}
                            </div>
                        </div>
                        <!--<div class="card-more-div">
                            <p>查看更多</p>
                        </div>-->
                        <div class="card-more-div" style="height:42px;background-color:transparent"/>
                    </div>
                </div>
            </div>
        </template>
        <!-- card5  start-->
        <template v-if="widget.type=='card5'">
            <div class="card5-box" :v-model="dataModel" :style="{'width':widget.options.boxWidth}">
                <div class="card5-point-title" >
                    <p> {{ widget.options.label }}</p>
                </div>
                <div class="card5-point-content">
                    <p>{{ widget.options.name }}</p>
                    <div class="card5-target-title" v-if="widget.options.showTarget">{{ widget.options.targetTitle }}：{{ widget.options.target }}</div>
                    <div class="card5-target-rule" v-if="widget.options.showRule">{{ widget.options.ruleTitle }}:{{ widget.options.rule }}</div>
                    <table class="card5-listTable" >
                        <tr v-for="(itmTr,idx) in widget.options.options" :key="idx" >
                            <td :colspan="itmTd.colspan" :rowspan="itmTd.rowspan" v-for="(itmTd,idx) in itmTr.td" :key="idx+'c'">
                                <p> {{ itmTd.value }}</p>
                            </td>
                        </tr>
                    </table>
                </div>
                <template v-if="widget.type=='FM1'">
                    <div class="FM1-box" :v-model="dataModel" >
                        <div class="FM1-top">
                            <!-- <img  src='@/assets/images/prove/prove_header.png' /> -->
                            <img :src="widget.options.imgDefaultValue">
                        </div>
                        <div class="FM1-content">
                            <p class="FM1-content-p1">{{ widget.options.titleDefaultValue }}</p>
                            <div class="FM1-content-div1"><span class="FM1-content-span1">{{ widget.options.detailValue }}</span> <span class="FM1-content-span2">{{ widget.options.noticeValue }}</span></div>
                        </div>
                    </div>
                </template>
            </div>
        </template>
        <template v-if="widget.type=='FM2'">
            <div class="FM2-box" :v-model="dataModel">
                <div class="FM2-left">
                    <!-- <img  src='@/assets/images/prove/prove_header.png' /> -->
                    <img :src="widget.options.imgDefaultValue">
                </div>
                <div class="FM2-right">
                    <p class="FM2-right-p1">{{ widget.options.titleDefaultValue }}</p>
                    <p class="FM2-right-p2"> {{ widget.options.titleNotice }}</p>
                    <div class="FM2-right-bottom-box">
                        <p class="FM2-right-bottom-box-p1">
                            <span class="FM2-right-bottom-box-p1-span1">{{ widget.options.detailValue }}</span>
                            <span class="FM2-right-bottom-box-p1-span2">{{ widget.options.noticeValue }}</span>
                        </p>
                        <p class="FM2-right-bottom-box-p2">
                            {{ widget.options.detailNotice }}
                        </p>
                    </div>
                </div>
            </div>
        </template>
        <!-- card5  end-->
    </el-form-item>
</template>

<script>
import FmUpload from './Upload'
import FmEditor from './Editor/tinymce'

export default {
    components: {
        FmUpload,
        FmEditor
    },
    props: ['widget', 'models', 'rules', 'remote'],
    data() {
        return {
            dataModel: this.models[this.widget.model]
        }
    },
    watch: {
        dataModel: {
            deep: true,
            handler(val) {
                this.models[this.widget.model] = val
                this.$emit('update:models', {
                    ...this.models,
                    [this.widget.model]: val
                })
            }
        },
        models: {
            deep: true,
            handler(val) {
                this.dataModel = val[this.widget.model]
            }
        }
    },
    created() {
        if (this.widget.options.remote && this.remote[this.widget.options.remoteFunc]) {
            this.remote[this.widget.options.remoteFunc]((data) => {
                this.widget.options.remoteOptions = data.map(item => {
                    return {
                        value: item[this.widget.options.props.value],
                        label: item[this.widget.options.props.label],
                        children: item[this.widget.options.props.children]
                    }
                })
            })
        }

        if (this.widget.type === 'imgupload') {
            this.remote[this.widget.options.tokenFunc]((data) => {
                this.widget.options.token = data
            })
        }
    },
    methods: {
        goLink(type, url, query) {
            if (type === 'inline') {
                const param = query ? JSON.parse(query.replace(/'/g, '"')) : null
                this.gotoMyehrPath(url, param)
            } else {
                window.open(url)
            }
        }
    }
}
</script>
